:root {
    --animation-state: 0
}

.general-button {
    --button-size: 30px;


    display: flex;
    background-color: var(--secondary-color);
    aspect-ratio: 1/1;
    cursor: pointer;
    user-select: none;
    font-size: calc(var(--button-size) / 1.2);
    align-items: center;
    justify-content: center;

    width: var(--button-size);
    min-width: var(--button-size);

    border-radius: .2em;
    
    margin: 0 .2em;

    transition: background-color .1s ease-out;
}

.general-button:active {
    background-color: var(--accent-color);
}

/* input[type="checkbox"] {
    appearance: none;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    background-color: var(--secondary-color);
    width: 5em;
    height: 5em;
    
    
    border-radius: .2em;
    
    transition: all 1s ease;
}

input[type="checkbox"]:checked {
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background-color: var(--accent-color);
} */

input[type="checkbox"] {
    appearance: none;
    position: relative;
    /* A 6-point polygon that defines a full rectangle */
    /* clip-path: polygon(14% 14%, 86% 14%, 86% 48%, 86% 86%, 14% 86%, 14% 48%); */
    background-color: var(--secondary-color);
    width: 2em;
    height: 2em;
    border-radius: .2em;
}

input[type="checkbox"]::before {
    content: "";
    display: block;

    opacity: var(--animation-state);
    
    position: absolute;
    top: -0.1em;
    left: -0.1em;
    
    border-radius: .2em;
    background: var(--accent-color);

    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);

    height: calc(100% + .2em);
    width: calc(100% + .2em);

    z-index: -1;

    animation: roundabout-2 .45s ease;
    animation-direction: reverse;
}
  
input[type="checkbox"]::after {
    content: "";
    display: block;

    opacity: var(--animation-state);
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    
    width: 0%;
    height: 0%;

    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background-color: var(--secondary-color);
    
    animation: tick-animation-2 .45s ease;
    animation-direction: reverse;
}


input[type="checkbox"]:checked {
    position: relative;
}

input[type="checkbox"]:checked::before {
    content: "";
    display: block;
    
    position: absolute;
    top: -0.1em;
    left: -0.1em;
    
    border-radius: .2em;
    background: var(--accent-color);

    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 50%);

    height: calc(100% + .2em);
    width: calc(100% + .2em);

    z-index: -1;

    animation: roundabout .45s ease;
}

@keyframes roundabout {
    0% {
        clip-path: polygon(0 0, 0 0, 0 0, 50% 50%, 50% 50%, 50% 50%);
    }
    25% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 50%);
    }
    50% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 50% 50%, 50% 50%);
    }
    75% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 50% 50%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 50%);
    }
}

@keyframes roundabout-2{
    0% {
        clip-path: polygon(0 0, 0 0, 0 0, 50% 50%, 50% 50%, 50% 50%);
    }
    25% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 50%);
    }
    50% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 50% 50%, 50% 50%);
    }
    75% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 50% 50%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 50%);
    }
}

input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    opacity: 1;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    
    width: 80%;
    height: 80%;

    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background-color: var(--accent-color);
    
    animation: tick-animation .45s ease;
}

@keyframes tick-animation {
    0% {
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 14%, 100% 0, 45% 0);
        background-color: var(--secondary-color);
        width: 100%;
        height: 100%;
    }
    100% {
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        background-color: var(--accent-color);
        width: 80%;
        height: 80%;
    }
}
@keyframes tick-animation-2 {
    0% {
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 14%, 100% 0, 45% 0);
        background-color: var(--secondary-color);
        width: 0%;
        height: 0%;
    }
    100% {
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        background-color: var(--accent-color);
        width: 80%;
        height: 80%;
    }
}